<template>
  <div>
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <div class="top-fl" v-if="flag">
          <el-form-item label="">
            <el-select
              clearable
              v-model="formInline.smartstatus"
              placeholder="智能设备状态"
              style="min-width: 19vw; padding: 0px 0px 0px 10px"
              size="medium"
            >
              <el-option label="完好" :value="1"></el-option>
              <el-option label="待维修" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              style="height: 36px;"
              v-model="formInline.date"
              size="small"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="">
            <el-input
              size="medium"
              v-model="formInline.homenum"
              placeholder="房号"
              style="min-width: 19vw"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              style="width: 100px"
              type="primary"
              @click="onSubmit"
              size="medium"
              ><i class="el-icon-search"></i>查询</el-button
            >
          </el-form-item>
        </div>
        <div class="top-fl" v-if="!flag">
          <el-form-item label="">
            <el-select
              clearable
              v-model="formInline2.familystatus"
              placeholder="家居设备状态"
              style="min-width: 19vw; padding: 0px 0px 0px 10px"
              size="medium"
            >
              <el-option label="完好" :value="1"></el-option>
              <el-option label="待维修" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-date-picker
            v-model="formInline2.date"
            size="small"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          <el-form-item label="">
            <el-input
              size="medium"
              v-model="formInline2.homenum"
              placeholder="房号"
              style="min-width: 19vw"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              style="width: 100px"
              type="primary"
              @click="onSubmit2"
              size="medium"
              ><i class="el-icon-search"></i>查询</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="min">
      <el-tabs
        @tab-click="handleClick"
        type="border-card"
        :data="tableData"
        style="width: 100%"
        :border="true"
        stripe
      >
        <el-tab-pane label="用户管理"
          ><el-table
            :data="tableData"
            style="width: 100%"
            :border="true"
            stripe
            v-loading="loading"
          >
            <el-table-column label="单元名称" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.unitname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="幢号" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.buildnum }}</span>
              </template>
            </el-table-column>
            <el-table-column label="房号" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.homenum }}</span>
              </template>
            </el-table-column>
            <el-table-column label="房主" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.homename }}</span>
              </template>
            </el-table-column>
            <el-table-column label="空调" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.airnum }}</span>
              </template>
            </el-table-column>
            <el-table-column label="Wi-Fi" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.wifiname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="洗衣机" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.washnum }}</span>
              </template>
            </el-table-column>
            <el-table-column label="授予时间" align="center">
              <template slot-scope="scope">
                <span>
                  {{
                    moment(scope.row.createtime)
                      .utcOffset(8)
                      .format("YYYY-MM-DD HH:mm:ss")
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              align="center"
              prop="smartstatus"
              :formatter="typeFormatter"
            >
            </el-table-column>

            <el-table-column label="操作状态" align="center">
              <template slot-scope="scope">
                <el-tooltip
                  :content="'Switch value: ' + scope.row.smartstatus"
                  placement="top"
                >
                  <el-switch
                    @change="changeStatus(scope.row)"
                    v-model="scope.row.smartstatus"
                    active-color="#DCDFE6"
                    inactive-color="#559EFF"
                    :active-value="1"
                    :inactive-value="2"
                  >
                  </el-switch>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagebox">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="pagesize"
              layout="sizes, prev, pager, next"
              :total="total"
            >
            </el-pagination></div
        ></el-tab-pane>
        <el-tab-pane label="家居设备">
          <el-table
            :data="tableData2"
            style="width: 100%"
            :border="true"
            stripe
            v-loading="loading"
          >
            <el-table-column label="单元名称" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.unitname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="幢号" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.buildnum }}</span>
              </template>
            </el-table-column>
            <el-table-column label="房号" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.homenum }}</span>
              </template>
            </el-table-column>
            <el-table-column label="房主" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.homename }}</span>
              </template>
            </el-table-column>
            <el-table-column label="桌子" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.homedesk }}</span>
              </template>
            </el-table-column>
            <el-table-column label="椅子" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.homechair }}</span>
              </template>
            </el-table-column>
            <el-table-column label="衣柜" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.homeclothes }}</span>
              </template>
            </el-table-column>
            <el-table-column label="授予时间" align="center">
              <template slot-scope="scope">
                <span>
                  {{
                    moment(scope.row.createtime)
                      .utcOffset(8)
                      .format("YYYY-MM-DD HH:mm:ss")
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              align="center"
              prop="familystatus"
              :formatter="typeFormatter1"
            >
            </el-table-column>

            <el-table-column label="操作状态" align="center">
              <template slot-scope="scope">
                <el-tooltip
                  :content="'Switch value: ' + scope.row.familystatus"
                  placement="top"
                >
                  <el-switch
                    @change="changeStatus2(scope.row)"
                    v-model="scope.row.familystatus"
                    active-color="#DCDFE6"
                    inactive-color="#559EFF"
                    :active-value="1"
                    :inactive-value="2"
                  >
                  </el-switch>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagebox">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="pagesize"
              layout="sizes, prev, pager, next"
              :total="total2"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
  <script>
import moment from "moment";
export default {
  data() {
    return {
      flag: true,
      loading: false,
      currentPage: 1, // 当前页码
      pagesize: 10, // 每页条数
      total: 0,
      total2: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      formInline: {
        smartstatus: "",
        familystatus: "",
        homenum: "",
        date: "",
      },
      formInline2: {
        smartstatus: "",
        familystatus: "",
        homenum: "",
        date: "",
      },
      tableData: [{}],
      tableData2: [{}],
    };
  },
  created() {
    this.getList();
    this.getList2();
    this.moment = moment;
  },
  methods: {
    handleClick(e) {
      console.log(e);
      this.currentPage = 1;
      this.formInline = {};
      this.formInline2 = {};

      if (e.index == 0) {
        this.getList();
        this.flag = true;
      } else {
        this.flag = false;
        this.getList2();
      }
    },
    typeFormatter1(row, column) {
      // console.log(row);
      let familystatus = row.familystatus;
      if (familystatus == 1) {
        return "完好";
      } else {
        return "待维修";
      }
    },
    typeFormatter(row, column) {
      // console.log(row);
      let familystatus = row.smartstatus;
      if (familystatus == 1) {
        return "完好";
      } else {
        return "待维修";
      }
    },
    // 搜索按钮
    async onSubmit() {
      this.loading = true;
      // console.log("aaa", this.formInline);
      if (this.formInline.date == null) {
        this.formInline.date = "";
      }
      await this.$axios
        .get("/house/searchdeviceList", {
          params: {
            smartstatus: this.formInline.smartstatus,
            familystatus: "",
            homenum: this.formInline.homenum,
            startDate: this.formInline.date[0],
            endDate: this.formInline.date[1],
            currPage: this.currentPage - 1,
            pageNum: this.pagesize,
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          this.loading = false;
          console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
    async onSubmit2() {
      this.loading = true;
      // console.log(this.formInline2);
      if (this.formInline2.date == null) {
        this.formInline2.date = "";
      }

      // console.log(this.formInline);
      //   console.log("submit!");
      await this.$axios
        .get("/house/searchdeviceList", {
          params: {
            smartstatus: "",
            familystatus: this.formInline2.familystatus,
            homenum: this.formInline2.homenum,
            startDate: this.formInline2.date[0],
            endDate: this.formInline2.date[1],
            currPage: this.currentPage - 1,
            pageNum: this.pagesize,
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          this.loading = false;
          console.log(res);
          this.tableData2 = res.data.data;
          this.total = res.data.total;
        });
    },
    //改变
    changeStatus2(res) {
      console.log(res);
      this.$confirm("确定更新该家居设备状态？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.$axios
            .post("/house/updatefamilyStatus", {
              id: res.id,
              familystatus: res.familystatus,
              token: sessionStorage.getItem("token"),
            })
            .then((res) => {
              this.$message({
                type: "success",
                message: "家居设备状态改变成功!",
              });
              this.getList2();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消改变家居状态",
          });
          this.getList2();
        });
    },
    //2222
    changeStatus(res) {
      console.log(res);
      this.$confirm("确定更新该智能设备状态？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.$axios
            .post("/house/updatesmartStatus", {
              id: res.id,
              smartstatus: res.smartstatus,
              token: sessionStorage.getItem("token"),
            })
            .then((res) => {
              this.$message({
                type: "success",
                message: "智能设备状态改变成功!",
              });
              this.getList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消改变智能设备状态",
          });
          this.getList();
        });
    },
    // 数据接口
    // 表格数据
    async getList() {
      this.loading = true;
      await this.$axios
        .get("/house/searchdeviceList", {
          params: {
            smartstatus: "",
            familystatus: "",
            homenum: "",
            startDate: "",
            endDate: "",
            currPage: this.currentPage - 1,
            pageNum: this.pagesize,
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        });
    },
    async getList2() {
      this.loading = true;
      await this.$axios
        .get("/house/searchdeviceList", {
          params: {
            smartstatus: "",
            familystatus: "",
            homenum: "",
            startDate: "",
            endDate: "",
            currPage: this.currentPage - 1,
            pageNum: this.pagesize,
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          // console.log(res);
          this.tableData2 = res.data.data;
          this.total2 = res.data.total;
          this.loading = false;
        });
    },
    // 数据处理==================
    handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      this.pagesize = val;
      if (
        this.formInline.communityname ||
        this.formInline.unitname ||
        this.formInline.createDt ||
        this.formInline.value
      ) {
        this.onSubmit();
      } else {
        this.getList();
        this.getList2();
      }
    },
    handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      this.currentPage = val;
      if (
        this.formInline.communityname ||
        this.formInline.unitname ||
        this.formInline.createDt ||
        this.formInline.value
      ) {
        this.onSubmit();
      } else {
        this.getList();
        this.getList2();
      }
    },
    //详情
    // 编辑
  },
};
</script>
  <style scoped>
.top {
  width: 100%;
  overflow: hidden;
}
.top-fl {
  width: 100%;
  height: 40px;
  display: flex;
  /* justify-content: space-between;
    align-items: flex-start */
}
/* 使用深度选择器 */
::v-deep .el-table .has-gutter tr th {
  background: rgb(238, 241, 246);
  color: rgb(31, 45, 61);
  border-color: rgb(223, 230, 236);
  font-size: 14px;
  text-align: center;
}
.min {
  width: 100%;
}
.pagebox {
  margin-top: 10px;
  display: flex;
  justify-content: right;
}
</style>